<template>
  <div>
    <!--<span class="data" @click="payTest">{{ alipayData }}</span>-->
    <div class="J-weixin-tip weixin-tip" @click="payTest">
      <div class="weixin-tip-content">
        请在菜单中选择在浏览器中打开,<br>
        以完成支付
      </div>
    </div>
    <div class="J-weixin-tip-img weixin-tip-img"/>
    <alipay-case ref="alipayCases"/>
  </div>
</template>

<script>
// import { isWechat } from '@/utils'
import alipayCase from '../order/components/alipayCase'
export default {
  name: 'PayTips',
  components: {
    alipayCase
  },
  data() {
    return {
      alipayData: undefined
    }
  },
  mounted() {
    this.routerEvent()
    this.showImg()
  },
  methods: {
    routerEvent() {
      const routeData = this.$route.query
      const jsonData = JSON.parse(routeData.payment)
      if (this.$refs.alipayCases) {
        this.$refs.alipayCases.alipayData = jsonData
        this.$refs.alipayCases.alipayData.biz_content = JSON.stringify(jsonData.biz_content)
        // console.log(this.$refs.alipayCases.alipayData)
      }
      /* eslint-disable */
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        // alert('在微信中')
      } else {
        // alert('不在微信中')
        setTimeout(() => {
          this.$refs.alipayCases.submitData()
        }, 500)
      }
    },
    payTest() {
      this.$refs.alipayCases.submitData()
    },
    showImg() {
      /* eslint-disable */
        if (location.hash.indexOf('error') != -1) {
          alert('参数错误，请检查');
        } else {
          var ua = navigator.userAgent.toLowerCase();
          var tip = document.querySelector(".weixin-tip");
          var tipImg = document.querySelector(".J-weixin-tip-img");
          if (ua.indexOf('micromessenger') != -1) {
            tip.style.display = 'block';
            tipImg.style.display = 'block';
            if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
              tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
              const url = window.location.href
              // alert(this.$route.query.close)
              if (this.$route.query.close !== 'true') {
                window.location.href = url + '&close=' + 'true'
              }
              // alert('iPhone版微信', url)
            } else {
              tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
            }
          } else {
          }
        }
      }
    }
  }
</script>

<style scoped>
  .weixin-tip {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 20px;
    width: 265px;
    padding: 55px 0 0;
    text-align: left;
    background: url() no-repeat right top;
    background-size: 45px 68px
  }
  
  .weixin-tip-img {
    display: none;
    padding: 110px 0 0
  }
  
  .weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: ' ';
    background-size: cover
  }
  
  .weixin-tip-img.iphone::after {
    width: 150px;
    height: 150px;
    background-image: url()
  }
  
  .weixin-tip-img.android::after {
    width: 173px;
    height: 240px;
    background-image: url()
  }
</style>
